<template>
  <div>
    <!-- 1.0 查询组件 -->
    <search />

    <!-- 2.0 表格 -->
    <div class="show-data">
      <div class="setting-tools">
        <el-button type="danger" size="mini">取 消</el-button>
        <el-button type="danger" size="mini">拉 黑</el-button>
        <el-button type="danger" size="mini">返 款</el-button>
        <el-button type="danger" size="mini">退 款</el-button>
        <el-button type="danger" size="mini">好 评</el-button>
        <el-button type="danger" size="mini">追 评</el-button>
      </div>
      <el-table
        ref="multipleTable"
        class="task-list"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="35"></el-table-column>
        <el-table-column md:width="220" width="260px">
          <template>
            <p class="task-title">任务：202002191229803933904404480</p>
            <div class="task-tpl">
              <div>
                <span>垫付</span>
                <img src="../../../assets/images/task_demo.png" alt />
              </div>
              <ul class="task-right">
                <li>
                  <strong>店名/昵称:</strong> 可可里小姐
                </li>
                <li>
                  <strong>进入方式:</strong> 淘口令链接
                </li>
                <li>
                  <strong>SKU:</strong> 随机，1件
                </li>
                <li>
                  <strong>下单价格:</strong> 79元
                </li>
              </ul>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" width="240px">
          <template>
            <p class="task-title">发布时间：2020-02-19 00:25:00</p>
            <div class="push-time-tpl">
              <ul class="push-time">
                <li>
                  <img src="../../../assets/images/icon_tao.png" alt />
                  <p>
                    <strong>平台担保金额：</strong>
                    <span>167 元</span>
                  </p>
                </li>
                <li>
                  <img src="../../../assets/images/money.png" alt />
                  <p>
                    <strong>任务佣金：</strong>
                    <span>11 元</span>
                  </p>
                </li>
                <li>
                  <p>
                    <strong>接单时间：</strong>
                    <span>2020-02-09 19:10:32</span>
                  </p>
                </li>
                <li>
                  <p>
                    <strong>完成时间：</strong>
                    <span>2020-02-09 19:40:52</span>
                  </p>
                </li>
              </ul>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" width="210px">
          <template>
            <p class="task-title">副宝贝信息</p>
            <div class="task-tpl">
              <div>
                <img src="../../../assets/images/fu_goods.png" alt />
              </div>
              <div class="task-right">
                <p>
                  <strong>关键词:</strong> 连衣裙
                </p>
                <p>
                  <strong>SKU:</strong> 随机，1件
                </p>
                <p>
                  <strong>下单价格:</strong> 88元
                </p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" width="180px">
          <template>
            <p class="task-title">拍手信息</p>
            <div class="task-right">
              <ul class="pai-info">
                <li>
                  <img src="../../../assets/images/icon_tao.png" alt />
                  <p>
                    <strong>实际付款：</strong>
                    <span>￥167</span>
                  </p>
                </li>
                <li>
                  <img src="../../../assets/images/money.png" alt />
                  <p>
                    <span>购物狂买买买</span>
                  </p>
                </li>
                <li>
                  <img src="../../../assets/images/money.png" alt />
                  <p>
                    <span>123456789123456789</span>
                  </p>
                </li>
              </ul>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" width="110px">
          <template>
            <p class="task-title">添加为模板</p>
            <div class="task-right tmpl-add">
              <el-button type="danger" size="mini">拉 黑</el-button>
              <el-button type="primary" size="mini">好评中</el-button>
              <el-button type="default" size="mini">详细信息</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column md:width="80px">
          <template>
            <p class="task-title">售出情况</p>
            <div class="task-right cell-info">
              <p>隔日</p>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 3.0 分页组件 -->
    <el-pagination
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
import Search from './Search.vue'
export default {
  components: { Search },
  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      multipleSelection: [],
      currentPage4: 1
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style lang="scss" scoped>
.show-data {
  position: relative;
}
.setting-tools {
  margin-bottom: 20px;
  position: absolute;
  top: 8px;
  left: 40px;
  z-index: 1;
}

.el-pagination {
  float: right;
  margin: 30px 0 50px;
}

.task-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
  background-color: #369;
  color: #fff;
  text-align: center;
}

.task-tpl {
  display: flex;
  font-size: 12px;
  div:nth-of-type(1) {
    margin-right: 10px;
    text-align: center;
  }
  div:nth-of-type(2) {
    li {
      line-height: 22px;
      strong {
        margin-right: 10px;
      }
    }
  }
  span {
    display: block;
    text-align: center;
    background-color: #f80;
    color: #fff;
  }
  img {
    width: 60px;
  }
}

.push-time li {
  display: flex;
  line-height: 30px;
  font-size: 12px;
  img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    margin-top: 4px;
  }
  p {
    span {
      color: #f40;
    }
  }
  &:nth-last-of-type(-n + 2) {
    padding-left: 28px;
  }
}

.pai-info {
  li {
    display: flex;
    line-height: 30px;
    img {
      width: 20px;
      height: 20px;
      margin-right: 8px;
      margin-top: 4px;
    }
    p {
      font-size: 12px;
    }
  }
}

.tmpl-add {
  text-align: center;
  .el-button {
    margin: 0 auto 10px;
    display: block;
    padding: 4px 8px;
  }
}

.cell-info p {
  text-align: center;
  font-size: 12px;
}
</style>
